Un nouveau template a été créé à l'étape précédente.
Maintenant, nous allons ajouter du contenu à ce template : un en-tête, un corps et un pied de page.
Remarque : Il existe plusieurs façons de concevoir le contenu d'un template. Nous ne montrerons qu'une seule possibilité pour chaque section.
En-tête du contenu
Pour l'en-tête du contenu (c'est-à-dire une section de navigation située en haut du contenu du template sans rapport avec l'en-tête du template), ajoutons une ligne à deux colonnes :
- Une petite colonne à gauche, contenant un lien Parana vers la page d'accueil de la boutique en ligne Parana.
- Une colonne plus large sur la droite, contenant trois liens vers des sections spécifiques de la boutique en ligne Parana : Mode, Maison et Électro.
Afin d'atteindre cet objectif :
- Faites glisser et déposez un composant Ligne de 2 colonnes parmi les composants de droite sur le canevas de conception du template, dans la section En-tête du template.
- Cliquez sur l'icône en forme de crayon bleu du composant Ligne de 2 colonnes ajouté pour afficher ses propriétés. Changez le ratio de largeur de colonne en 14.
- Dans la colonne gauche (indiquant « Déposer du contenu ici » lorsque vous la survolez), faites glisser et déposez un composant Texte depuis la droite (depuis la section Contenu).
- Dans la colonne droite (indiquant « Déposer du contenu ici » lorsque vous la survolez), faites glisser et déposez un autre composant Texte depuis la droite (depuis la section Contenu).
Remarque : Si vous souhaitez supprimer une ligne, vous pouvez la survoler et cliquer sur l'icône bleue en forme de corbeille (il est conseillé de conserver la ligne contenant le lien vers la version Web, car sa suppression pourrait entraîner des erreurs lors de la création du journey).
Votre conception ressemble maintenant à ceci :
-
Cliquez dans la colonne gauche pour ajouter du texte :
-
Ajoutez le texte suivant en majuscules : PARANA.
-
Dans la colonne droite, ajoutez les textes (espacés) : Mode, Maison, Électro.
-
Changez le type de police des textes en Tahoma et la taille de la police en 18px.
-
Procédez à l'alignement central du texte PARANA.
-
Cliquez sur l'icône en forme de crayon bleu pour afficher les propriétés de la ligne, puis cliquez sur le crayon à droite dans la section Style des propriétés pour modifier le style.
-
Ajoutez du remplissage en haut de la ligne, de sorte que le texte soit aligné verticalement et s'affiche au milieu de cette ligne.
Pour ce faire, ajoutez une entrée au « style personnalisé », qui est la section centrale de la fenêtre pop-up, comme ceci : padding-top : 20 px;
Cliquez sur OK pour fermer la fenêtre contextuelle et appliquer le style personnalisé.
Il en résultera un espacement supplémentaire en haut de la ligne :
- Changez la couleur d'arrière-plan de la ligne en #3bbec0 (vous pouvez entrer un code de couleur hexadécimal, ou simplement sélectionner une couleur dans le sélecteur de couleur visuel) :
-
Changez la couleur du texte des deux colonnes en blanc (#ffffff), en sélectionnant simplement le texte et la couleur désirée :
-
Cliquez sur Appliquer.
Votre template ressemble maintenant à ceci :
Remarque : Par rapport à une conception d'e-mail, vous remarquerez les icônes de verrouillage sur les différents composants du template.
Le mécanisme de verrouillage est expliqué ici.
Ajoutons maintenant des liens aux textes, afin que les destinataires de l'e-mail puissent se rendre dans votre boutique en ligne à partir du template.
Cette vidéo montre comment ajouter un lien sur le texte PARANA qui cible l'URL de la boutique en ligne :
Répétez ce processus pour ajouter des liens vers Mode, Accueil et Électro.
Au lieu d'établir un lien vers la page d'accueil de la boutique en ligne (par exemple, https://paranasolution.selligent.com/shop/), liez chaque catégorie à sa page Web appropriée (par exemple, https://paranasolution.selligent.com/shop/default.aspx?CATIDL2=22).
Remarque : Tous les liens s'affichent dans la section Liens (quand vous cliquez sur cette icône en haut à droite de l'Éditeur de contenu 
) :
L'en-tête du template est maintenant prêt.
Passons au contenu du corps.
Remarque : N'oubliez pas d'enregistrer votre template régulièrement.
Corps du contenu
Le corps du contenu que nous voulons créer doit être composé d'une image et d'un texte.
-
Comme l'image et le texte occupent toute la largeur du corps, nous allons faire glisser et déposer une ligne de 1 colonne depuis la droite sur le canevas de conception, dans la section du corps.
-
Ensuite, à l'intérieur de la ligne de 1 colonne, nous ajoutons un composant Image et un composant Texte en dessous.
-
Dans les propriétés de l'image, sélectionnez l'image correcte (téléchargez-la dans la bibliothèque si nécessaire).
-
Ajoutez le texte (comme indiqué dans l'écran ci-dessus) sous l'image.
-
Définissons un lien dans les propriétés de l'image, afin que les destinataires de l'e-mail puissent cliquer sur l'image pour accéder à votre boutique en ligne.
Il est possible de définir un nouveau lien, ou de sélectionner un lien existant dans la liste.
C'est tout pour le contenu du corps.
Passons au pied de page.
Pied de page du contenu
Comme pied de page, nous souhaitons une ligne contenant des icônes de médias sociaux à gauche, ainsi que des informations sur le copyright et un lien de désabonnement à droite.
- Par défaut, un pied de page s'affiche. Celui-ci existe à partir d'une seule colonne. Comme nous souhaitons une ligne de 2 colonnes, supprimons la ligne de pied de page par défaut en la survolant et en cliquant sur l'icône bleue en forme de corbeille.
- Maintenant, faisons glisser et déposons une ligne de 2 colonnes depuis les composants de droite sur le canevas de conception du template, dans la section Pied de page du template.
- Cliquez sur l'icône en forme de crayon bleu du composant Ligne de 2 colonnes ajouté pour afficher ses propriétés. Changez le ratio de largeur de colonne en 21
- Sélectionnez la colonne gauche et réglez la mise en page de la colonne sur horizontale (car nous voulons ajouter 4 images à côté des autres).
- Dans la colonne gauche, faites glisser et déposez 4 composants Image depuis la droite (depuis la section Contenu).
- Dans la colonne droite, faites glisser et déposez un composant Texte depuis la droite (depuis la section Contenu).
Vidéo illustrant les étapes ci-dessus :
- Pour les composants Image :
- Choisissez l'icône appropriée pour chaque image (Facebook, 'X' (anciennement Twitter), Google, Youtube). Téléchargez des images si nécessaire.
- Définissez la largeur de l'image de chaque icône à 30px.
- Pour le composant Texte :
- Ajouter le texte : © 2022 Parana - Se désinscrire.
Vidéo illustrant les étapes ci-dessus :
Votre pied de page ressemble maintenant à ceci :
- Changez la couleur de fond de la ligne en gris foncé : Cliquez sur la ligne et sur l'icône en forme de crayon bleu. Sélectionnez ensuite la couleur gris foncé dans le sélecteur visuel (ou saisissez un code de couleur hexadécimal) dans la section Style des propriétés de la ligne.
- Changez la couleur du texte « © 2022 Parana - Se désinscrire » dans la colonne droite en blanc, en sélectionnant le texte et en cliquant sur la liste déroulante en regard du symbole A.
La couleur blanche peut alors être sélectionnée à partir d'un sélecteur visuel (ou en saisissant un code couleur hexadécimal) et peut être appliquée.
- Dans les propriétés de la ligne, modifiez le style :
- Ajoutez ceci au « style personnalisé » :
vertical-align : middle;
Les icônes des médias sociaux et le texte seront alors alignés verticalement au centre de la ligne et non plus en haut.
Nous devons maintenant ajouter des liens vers les icônes des médias sociaux et vers le texte de désabonnement :
- Cliquez sur l'icône Facebook et ajoutez un lien.
- Saisissez le nom du lien, une cible URL Facebook externe et cliquez sur OK.
- Répétez cette opération pour les autres icônes de médias sociaux, afin de les relier aux URL appropriées pour 'X' (anciennement Twitter), Google et Youtube.
-
Enfin, nous ajouterons également un lien au texte de désabonnement.
Créons un nouveau lien et définissons une URL cible externe comme destination du lien.
Activez la bascule Lien de désabonnement, afin que la validation reconnaisse ce lien comme un lien de désabonnement.
Définissez la couleur du texte en blanc (code couleur hexadécimal : #ffffff).
Remarque : N'oubliez pas d'enregistrer votre template régulièrement.
Déverrouiller des éléments de contenu
Nous avons créé un template pour que le marketer qui met en place le journey puisse ensuite modifier certains contenus avant d'envoyer les e-mails finaux.
Pour ce faire, nous devons nous assurer que les bons composants sont déverrouillés dans le template.
Voici comment procéder :
- Sélectionnez l'image Soldes de printemps et, dans les propriétés à droite, cliquez sur l'icône « verrouillé ».
- L'icône se transforme en icône « déverrouillé ». Dans le contenu de gauche, le verrou de l'image a disparu.
- Faites de même pour le texte sous l'image. Sélectionnez-le et, dans les propriétés à droite, cliquez sur l'icône l'icône « verrouillé ».
- L'icône se transforme en icône « déverrouillé » et, dans le contenu de gauche, le verrou sur le texte a disparu.
L'image et le texte sont maintenant déverrouillés.
Enregistrez le template.
| ÉTAPES : |
|---|
| 1. Créer un nouveau template |
| 2. Concevoir le contenu du template |
| 3. Ajouter l'en-tête du template |
| 4. Extraire la version texte |
| 5. Tester/examiner le template |
| 6. Créer un journey de base pour envoyer le template d'e-mail aux contacts |
